<template>
  <div class="page-wrap">
    <div class="container">
      <div class="form">
        <div class="form-group">
          <span>手机号</span>
          <input
            class="form-input tel-input"
            type="number"
            maxlength="11"
            placeholder="请输入手机号"
            value="" ref="name"
          />
        </div>
        <div class="form-group">
          <input class="form-input" type="number" maxlength="6" placeholder="请输入验证码"
            value="" ref="code"
          />
          <span class="item-btn" :disabled="btnDisabled" @click="getValidCode()">{{validTitle}}</span>
        </div>
      </div>
    </div>
    <div style="text-align:center">
      <el-button @click="submit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { API } from '../../config'
// import { isTel, isCode } from '../../util/validate'
export default {
  name:'mobile',
  data() {
    return {
      validTitle: '获取验证码',
      btnDisabled: false,
      interval: '',
      tel: '',
      code: ''
    }
  },
  methods:{
    // 获取验证码
    getValidCode() {
      let tel = this.$refs.name.value;
      let vm = this;
      let isTel = /^[1]([3-9])[0-9]{9}$/;
      console.log("tel:"+tel)
      if (isTel.test(tel)) {
        vm.$axios.get(API + '/user/getSmsCode?mobile='+tel).then((response) => {
          if(response.data.code=='200'){
            vm.countDown(60)
          } else {
            vm.$message(response.data.msg)
          }
        })
      } else {
        vm.$message('请输入正确的手机号')
      }
    },
    // 取消
    cancel() {
      this.status = false
      this.clearTime()
      this.$emit('bindphonecancelcb') // 取消回调
    },
    // 提交
    async submit() {
      let vm = this;
      // const globalData = wepy.$instance.globalData
      // 验证表单
      if (this.validateForm()) {
        let phoneParams = {
          mobile: this.$refs.name.value,
          code: this.$refs.code.value
        }
        console.log("phoneParams:"+JSON.stringify(phoneParams))
        // const res = await this.bindPhone(phoneParams)

        let isTrue = false
        vm.$axios.get(API + '/user/complet/userinfo?mobile='+this.$refs.name.value+'&code='+this.$refs.code.value).then((response) => {
          if(response.data.code=='200'){
            isTrue = true
            this.setTel(parseInt(this.tel))
            this.status = false
            vm.$message({
              title: '手机号绑定成功',
              icon: 'none',
              success: () => {
                setTimeout(() => {
                  vm.$router.go(-1);
                  if (globalData.tabList.includes(globalData.indexPage[0])) {
                    // wx.switchTab({
                    //   url: '/' + wepy.$instance.globalData.indexPage[0]
                    // })
                  } else {
                    let options = this.$refs.globalData.indexPageOptions
                    let query = '?'
                    for (let x in options) {
                      query += x + '=' + options[x] + '&'
                    }
                    // wx.redirectTo({
                    //   url: '/' + wepy.$instance.globalData.indexPage[0] + query
                    // })
                  }
                }, 1000)
              }
            })
          } else if (response.data.code === 9) {
            vm.$message('手机验证码错误')
          } else if (response.data.code === 10) {
            vm.$message('新手机号码已被绑定')
          } else {
            vm.$message('手机绑定失败')
          }
          return isTrue
        })
      }
    },
    // 验证表单
    validateForm() {
      let vm = this
      if (!vm.$refs.name.value) {
        console.log("vm.tel:"+vm.$refs.name.value)
        vm.$message('请填写手机号码')
        return false
      }
      let isTel = /^[1]([3-9])[0-9]{9}$/;
      if (!isTel.test(vm.$refs.name.value)) {
        console.log("vm.tel:"+vm.$refs.name.value)
        vm.$message('请填写正确的手机号码')
        return false
      }

      if (!vm.$refs.code.value) {
        vm.$message('请填写手机验证码')
        return false
      }
      let isCode = /^\d{6}$/
      if (!isCode.test(vm.$refs.code.value)) {
        vm.$message('请填写正确的手机验证码')
        return false
      }
      return true
    },

    clearTime() {
      clearInterval(this.interval)
      this.interval = ''
      this.validTitle = '获取验证码'
      this.btnDisabled = false
    },
    countDown(count) {
      let self = this
      self.validTitle = `${count}s`
      self.interval = setInterval(() => {
        count--
        self.validTitle = `${count}s`
        this.btnDisabled = true
        if (count < 1) {
          clearInterval(self.interval)
          self.validTitle = '获取验证码'
          self.btnDisabled = false
        }
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>
  .container {
    background: #fff;

    .form {
      font-size: 0.8rem ;
      .form-group {
        display: flex;
        line-height: 2.667rem;
        border-bottom: 0.04rem solid #eee;
        padding: 0 0.8rem;
      }
      .form-input {
        flex: 1;
        // height: 2.667rem;
        // line-height: 2.667rem;
        border:none;
        outline: none;

        &.tel-input {
          text-align: right;
          border:none;
          outline: none;
        }
      }
      .item-btn {
        background-color: none;
        color: #fd7418;
        background-color: #fff;
        border: 0;
      }
    }
  }
  .el-button {
    height: 2.667rem;
    margin: 1.33rem 0.8rem 0;
    border-radius: 1.33rem;
    color: #fff;
    background-color: #fd7418;
    line-height: 0.8rem;
  }
</style>
